<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('初始多表格')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: muti-select-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        .form-group {
            margin-left: 10px;
        }
        .form-row {
            display: flex;
        }
        .form-item {
            display: flex;
            align-items: center;
            width: 300px;
        }
        .form-item-long {
            width: 360px;
        }
        .form-item-long2 {
            width: 600px;
        }
        .form-item-all {
            width: 100%;
        }
        .form-label {
            width: 230px;
            text-align: right;
        }
        .form-label-short {
            width: 120px;
        }

        .btnBox {
            display: flex;
            justify-content: center;
        }
        .wrapperBox {
            margin: 0;
            width: auto;
        }
        .radioBox {
            display: flex;
        }
        .radioBox-item {
            position: relative;
            display: block;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: 10px;
            display: flex;
            align-items: center;
        }
        .unit {
            margin-left: 10px;
        }
        .input-normal {
            width: 310px;
        }
        .input-small {
            width: 100px;
        }
        .input-mini {
            width: 80px;
        }
        .container-div {
            overflow: scroll;
        }
        .textarea {
            width: 400px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <form  class="form" id="form-order-add">
        <div class="wrapperBox wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>创建订单</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">公司：</label>
                                    <div class="input-normal">
                                        <select id="companyId" name="companyId" required class="form-control" th:with="type=${@dict.getType('company')}">
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}" ></option>
                                        </select>
                                    </div>

                                </div>
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">申请单位：</label>
                                    <input id="applicationUnit" name="applicationUnit" placeholder="请输入申请单位" class="form-control" type="text" maxlength="40" required>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">报检编号：</label>
                                    <input id="inspectionNumber" name="inspectionNumber" placeholder="请输入报检编号" class="form-control" type="text" maxlength="40" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">处理对象：</label>
                                    <input id="processObject" name="processObject" placeholder="请输入处理对象" class="form-control" type="text" maxlength="40" required>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">处理地点：</label>
                                    <input id="processSites" name="processSites" placeholder="请输入处理地点" class="form-control" type="text" maxlength="40" required>
                                </div><div class="form-group form-item">
                                <label class="font-normal form-label">处理范围：</label>
                                <input id="processRange" name="processRange" placeholder="请输入处理范围" class="form-control" type="text" maxlength="40" required>
                            </div>

                            </div>
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">统计类别：</label>
                                    <div id="statisticsCategory" class="select-tree-wrap"></div>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">处理方案：</label>
                                    <div id="processNumber" class="select-tree-wrap"></div>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">处理方案别名：</label>
                                    <input id="processNumberAliases" name="processNumberAliases" placeholder="请输入处理方案别名" class="form-control" type="text" maxlength="40">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-normal form-label">使用药剂：</label>
                                    <input id="medicineId" name="medicineId" data-id="0" data-val="" placeholder="请选择处理方案" class="form-control" type="text" disabled required>
                                </div>
                                <div class="form-group form-item" style="width: 340px">
                                    <label class="font-normal form-label">用药总量：</label>
                                    <input id="totalMedication" name="totalMedication" class="form-control" type="number" required><span class="totalMedicationUnit unit"></span>
                                </div>
                                <div class="form-group form-item" style="width: 340px">
                                    <label class="font-normal form-label">单位剂量/浓度：</label>
                                    <input id="concentration"  style="width: 175px" name="concentration" class="form-control" type="number" required><span class="concentrationUnit unit"></span>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item form-item-long">
                                    <label class="font-normal form-label">处理时间：</label>
                                    <input id="processTime" name="processTime" style="width: 175px" class="form-control" type="number" required><div style="width: 93px" class="processTime unit">小时</div>
                                </div>
                                <div class="form-group form-item" style="width: 250px">
                                    <label class="font-noraml form-label"  style="width: 100px">湿度：</label>
                                    <input id="humidity" name="humidity" class="form-control" type="number" required><span class="humidity unit">%</span>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-noraml form-label">风速：</label>
                                    <input id="windSpeed" name="windSpeed" class="form-control" type="number" required><span class="windSpeed unit">m/s</span>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item" style="width: 303px">
                                    <label class="font-normal form-label">温度：</label>
                                    <input id="temperature" style="width: 155px" name="temperature" class="form-control" type="number" required><span class="temperature unit">℃</span>
                                </div>
                                <div class="form-group form-item form-item-long2">
                                    <label class="font-normal  form-label form-label-short">数量/重量 ：</label>
                                    <input id="firstQuantity" name="firstQuantity" class="form-control input-mini" type="number">
                                    <div class="input-mini">
                                        <select id="firstUnit" name="firstUnit" class="form-control" th:with="type=${@dict.getType('first_unit')}">
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}" ></option>
                                        </select>
                                    </div>
                                    <input id="secondQuantity" name="secondQuantity" class="form-control input-mini" type="number">
                                    <div class="input-mini">
                                        <select id="secondUnit" name="secondUnit" class="form-control" th:with="type=${@dict.getType('second_unit')}">
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}" ></option>
                                        </select>
                                    </div>
                                    <input id="thirdQuantity" name="thirdQuantity" class="form-control input-mini" type="number">
                                    <div class="input-mini">
                                        <select id="thirdUnit" name="thirdUnit" class="form-control" th:with="type=${@dict.getType('third_unit')}">
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}" ></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-noraml form-label">面积：</label>
                                    <input id="area" name="area" class="form-control" type="number" disabled value="0" >
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-noraml form-label">体积：</label>
                                    <input id="volume" name="volume" class="form-control" value="0" disabled type="number" >
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-noraml form-label">金额：</label>
                                    <input id="amount" name="amount" class="form-control" type="number"  required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item form-item-all">
                                    <label class="font-noraml form-label form-label-short">处理方式：</label>
                                    <div class="radioBox processMethod" th:with="type=${@dict.getType('process_method')}">
                                        <div class="radioBox-item" th:each="dict : ${type}">
                                            <label>
                                                <input type="radio" required th:value="${dict.dictCode}" name="processMethod" th:text="${dict.dictLabel}"> <i></i></label>
                                            <input id="processMethodRemark" name="processMethodRemark" th:if="${dict.dictLabel} == '其他'" class="form-control" type="text" style="width: 100px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item form-item-long">
                                    <label class="font-noraml form-label-short form-label">施药开始时间 ：</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" name="applicationStartTime" id="applicationStartTime" placeholder="yyyy-MM-dd HH:mm:ss" required>
                                    </div>
                                </div>
                                <div class="form-group form-item form-item-long">
                                    <label class="font-noraml form-label-short form-label">施药结束时间：</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" name="applicationEndTime" id="applicationEndTime" placeholder="yyyy-MM-dd HH:mm:ss" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item form-item-long">
                                    <label class="font-noraml form-label-short form-label">散气开始时间：</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" name="diffuseStartTime" id="diffuseStartTime" placeholder="yyyy-MM-dd HH:mm:ss">
                                    </div>
                                </div>
                                <div class="form-group form-item form-item-long">
                                    <label class="font-noraml form-label-short form-label">散气结束时间：</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" name="diffuseEndTime" id="diffuseEndTime" placeholder="yyyy-MM-dd HH:mm:ss" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item">
                                    <label class="font-noraml  form-label">现场负责人 ：</label>
                                    <input id="siteLeader" name="siteLeader" placeholder="请输入现场负责人" class="form-control" type="text"  required>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-noraml  form-label">操作人员 ：</label>
                                    <input id="operator" name="operator" class="form-control" type="text" required>
                                </div>
                                <div class="form-group form-item">
                                    <label class="font-noraml form-label">额外批次数量：</label>
                                    <input id="additionalBatcheNumber" name="additionalBatcheNumber" class="form-control" type="number">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-item" style="width: 341px;">
                                    <label class="font-normal form-label">备注：</label>
                                    <textarea id="remark" name="remark" class="form-control input-small textarea"></textarea>
                                </div>
                                <div class="form-group form-item" style="width: 341px;">
                                    <label class="font-normal form-label">处理对象标识：</label>
                                    <textarea id="processObjectId" name="processObjectId" class="form-control input-small textarea"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="btnBox">
                            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()" shiro:hasPermission="system:order:add"><i class="fa fa-check"></i>保 存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div th:include="include :: footer"></div>
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: muti-select-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    function formatMutiSelect(list, tempIndex) {
        let result = [];
        list.forEach((item, index) => {
            let temp = {};
            temp.id = tempIndex +  index;
            temp.title = item.dictLabel;
            temp.dictCode = item.dictCode || 0;
            let tempChild = item.categorySecondList || item.categoryThirdList || [];
            if (tempChild.length > 0){
                temp.subs = formatMutiSelect(tempChild, temp.id + "-");
            }
            result.push(temp)
        });
        return result;
    }
    function needVolume(processNumber) {
        let flag = false;
        switch (processNumber) {
            case '11':
            case '12':
            case '12-2':
            case '13':
            case '13-2':
            case '14':
            case '15':
            case '16':
                flag = true;
                break;
            default:
                break;
        }
        return flag;
    }
    function needArea(processNumber) {
        let flag = false;
        switch (processNumber) {
            case '1':
            case '1-2':
            case '3':
            case '3-2':
            case '4':
            case '4-2':
            case '7':
            case '7-2':
            case '9':
            case '9-2':
                flag = true;
                break;
            default:
                break;
        }
        return flag;
    }
    function formatProgramMedicine(program, medicine,program_medicine) {
        let result = [];
        program_medicine.forEach(item => {
            let infos = item.remark.split("-");
            let programIndex = infos[0];
            let medicineIndex = infos[1];
            let remark = [];
            infos.forEach((item, index) => {
                if (index > 1){
                    remark.push(item);
                }
            });
            let dictValue = item.dictValue;
            let temp;
            let flag = 0;
            result.forEach(item => {
                if (item.id == programIndex) {
                    temp = item;
                    flag = 1;
                }
            });
            program.forEach(programItem => {
                if (programItem.dictCode == programIndex) {
                    temp = !!flag ? temp : {};
                    temp.id = programItem.dictCode;
                    temp.title = programItem.dictLabel;
                    temp.dictCode = programItem.dictCode;
                    medicine.forEach(medicineItem => {
                        if (medicineItem.dictCode == medicineIndex){
                            let tempChild= {};
                            tempChild.id = medicineItem.dictCode;
                            tempChild.parent = item.dictCode;
                            tempChild.title = medicineItem.dictLabel;
                            tempChild.dictCode = dictValue;
                            tempChild.remark = remark.join("-");
                            if (temp.subs){
                                temp.subs.push(tempChild);
                            } else {
                                temp.subs = [tempChild];
                            }
                        }
                    });
                }
            });
            if (!flag && temp){
                result.push(temp);
            }
        })
        return result;
    }
    function calculator(processNumber) {
        let firstQuantity = $('#firstQuantity').val() ? $('#firstQuantity').val() : 0;
        let secondQuantity = $('#secondQuantity').val() ? $('#secondQuantity').val() : 0;
        if (needArea(processNumber)){
            $("#area").val(firstQuantity*55 + secondQuantity*110);
            $("#volume").val(0);
        } else if (needVolume(processNumber)){
            $("#area").val(0);
            $("#volume").val(firstQuantity*33.3 + secondQuantity*66.6);
        } else {
            $("#area").val(0);
            $("#volume").val(0);
        }
    }
    let statisticsCategory = null;
    var program = [[${@dict.getType('program')}]];
    var medicine = [[${@dict.getType('medicine')}]];
    var program_medicine = [[${@dict.getType('program_medicine')}]];
    var processNumber = null;
    processNumber = $('#processNumber').comboTree({
        source : formatProgramMedicine(program, medicine, program_medicine),
        isMultiple: false,
        isFirstClassSelectable:false, //第一级是否可选
        titleAlias: 'code',
        callback: function() {
            let data = processNumber.datas()[0];
            $("#medicineId").attr('data-id', data.id);
            $("#medicineId").attr('data-val', data.val);
            $("#medicineId").val(data.title);
            let remarks = data.remark.split("-");
            $("#concentration").val(remarks[0] || '');
            $(".concentrationUnit.unit").html(remarks[1] || '');
            $(".totalMedicationUnit.unit").html(remarks[2] || '');
            calculator(data.val);
        }
    });
    $("#firstQuantity,#secondQuantity").on('input', function(){
        calculator($("#medicineId").attr('data-val'));
    })
    $(function() {
        $('#companyId').select2({
            placeholder: "请选择公司"
        });
        $("#applicationStartTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });
        $("#applicationEndTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });
        $("#diffuseStartTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });
        $("#diffuseEndTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });
        $.get('/order/getAllStatisticsCategory', (res) => {
            statisticsCategory = $('#statisticsCategory').comboTree({
                source : formatMutiSelect(res.data, ''),
                isMultiple: false,
                isFirstClassSelectable:false, //第一级是否可选
                callback: function() {
                    console.log(1)
                }
            });
            $.get('/order/getLatestOrder', (res) => {
                if (res.code == 0){
                    if ($("#statisticsCategory div[data-code=\'"+ res.data.statisticsCategoryId +"\']").length > 0){
                        statisticsCategory.checkrow($("#statisticsCategory div[data-code=\'"+ res.data.statisticsCategoryId +"\']"), $("#statisticsCategory div[data-code=\'"+ res.data.statisticsCategoryId +"\']").attr('data-id'), false);
                    }
                    if ($("#processNumber div[data-code=\'"+ res.data.processNumber +"\']").length > 0) {
                        processNumber.checkrow($("#processNumber div[data-code=\'"+ res.data.processNumber +"\']"), $("#processNumber div[data-code=\'"+ res.data.processNumber +"\']").attr('data-id'), false);
                    }
                    let companys = [[${@dict.getType('company')}]];
                    companys.forEach(item => {
                        if (item.dictLabel == res.data.companyName) {
                            $("#companyId").select2("val", [item.dictCode]);
                        }
                    });
                    $("#applicationUnit").val(res.data.applicationUnit);
                    $("#inspectionNumber").val(res.data.inspectionNumber);
                    $("#processObject").val(res.data.processObject);
                    $("#processSites").val(res.data.processSites);
                    $("#processRange").val(res.data.processRange);
                    $("#totalMedication").val(res.data.totalMedication);
                    $("#concentration").val(res.data.concentration);
                    $("#concentrationUnit").val(res.data.concentrationUnit);
                    $("#totalMedication").val(res.data.totalMedication);
                    $("#totalMedicationUnit").val(res.data.totalMedicationUnit);
                    $("#processTime").val(res.data.processTime);
                    $("#temperature").val(res.data.temperature);
                    $("#firstQuantity").val(Number(res.data.firstQuantity));
                    let firstUnits = [[${@dict.getType('first_unit')}]];
                    firstUnits.forEach(item => {
                        if (item.dictLabel == res.data.firstUnit) {
                            $("#firstUnit").select2("val", [item.dictCode]);
                        }
                    });
                    $("#secondQuantity").val(Number(res.data.secondQuantity));
                    let secondUnits = [[${@dict.getType('second_unit')}]];
                    secondUnits.forEach(item => {
                        if (item.dictLabel == res.data.secondUnit) {
                            $("#secondUnit").select2("val", [item.dictCode]);
                        }
                    });
                    $("#thirdQuantity").val(Number(res.data.thirdQuantity));
                    let thirdUnits = [[${@dict.getType('third_unit')}]];
                    thirdUnits.forEach(item => {
                        if (item.dictLabel == res.data.thirdUnit) {
                            $("#thirdUnit").select2("val", [item.dictCode]);
                        }
                    });
                    $("#applicationStartTime").val(res.data.applicationStartTime);
                    $("#applicationEndTime").val(res.data.applicationEndTime);
                    $("#diffuseStartTime").val(res.data.diffuseStartTime);
                    $("#diffuseEndTime").val(res.data.diffuseEndTime);
                    $("#humidity").val(res.data.humidity);
                    $("#windSpeed").val(res.data.windSpeed);
                    $("#siteLeader").val(res.data.siteLeader);
                    $("#operator").val(res.data.operator);
                    $("#amount").val(res.data.amount);
                    $("#area").val(res.data.area);
                    $("#volume").val(res.data.volume);
                    $("#additionalBatcheNumber").val(res.data.additionalBatcheNumber);
                    $("#remark").val(res.data.remark);
                    $("#processObjectId").val(res.data.processObjectId);
                    let methods = [[${@dict.getType('process_method')}]];
                    methods.forEach(item => {
                        if (item.dictLabel == res.data.processMethod) {
                            $(`.processMethod input[value=${item.dictCode}]`).attr('checked','true');
                        }
                        if (res.data.processMethod == '其他'){
                            $("#processMethodRemark").val(res.data.processMethodRemark);
                        }
                    });
                }
            });
        });
    })
    function submitHandler() {
        if ($.validate.form('form-order-add')) {
            var data = $("#form-order-add").serializeArray();
            if (statisticsCategory.datas().length == 0){
                $.modal.alertWarning("请选择统计类别");
                return;
            }
            if (processNumber.datas().length == 0){
                $.modal.alertWarning("请选择处理方案");
                return;
            }

            data.push({
                name: 'statisticsCategory',
                value: statisticsCategory.datas()[0].code
            });
            data.push({
                name: 'processNumber',
                value: processNumber.datas()[0].parent
            });
            let temp = {};
            data.forEach(item => {
                temp[item.name] = item.value;
            });
            temp.area =  $("#area").val();
            temp.volume = $("#volume").val();
            temp.medicineId = $("#medicineId").attr('data-id');
            temp.concentrationUnit = $(".concentrationUnit").html();
            temp.totalMedicationUnit = $(".totalMedicationUnit").html();
            var config = {
                url: '/order/add',
                type: "post",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(temp),
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function(result) {
                    $.operate.successTabCallback(result);
                }
            };
            $.ajax(config);
        }
    }
</script>
</body>
</html>